<script>
import { ElMessage } from 'element-plus'

import useCustomerStore from '@/stores/customer'
const customerStore = useCustomerStore()

export default {
    name: 'AllFiles',
    data() {
        return {
            files: []
        }
    },
    // 生命周期钩子
    created() {
        const url = '/back/file/list';
        const config = {
            headers: {
                'authorization': `Bearer ${customerStore.getToken}`
            }
        }
        this.axios.get(url, config).then(resp => {
            const { success, message } = resp.data;
            if (success) {
                // 将后端返回的文件列表设置到当前组件的files属性
                this.files = resp.data.result;
                return;
            }
            ElMessage({ message: `${message}`, type: 'warning' })
        }).catch(reason => {
            ElMessage({ message: `请求失败！(${reason})`, type: 'warning' })
            console.log('reason: ', reason);
        })
    }
}
</script>

<template>
    <h3>所有文件</h3>
    <el-table :data="files" style="width: 100%">
        <el-table-column label="序号" width="100px">
            <template #default="{$index}">
                {{ $index + 1 }}
            </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="size" label="大小(bytes)" />
        <el-table-column prop="uploadTime" label="上传时间" />
    </el-table>
</template>